<template>
	<view class="page">
		<MallHeader title="收货地址"></MallHeader>
		<view class="list pad">
			<view class="item box-ff" v-for="(a,i) in listData" :key="i" @click="onChange(i)">
				<view class="item1">
					<text class="name">{{a.name}}</text>
					<text class="phone">{{a.phone}}</text>
				</view>
				<view class="item2">
					{{a.address}}
				</view>
				<view class="item3">
					<view class="left">
						<checkbox-group>
							<label class="radio"><checkbox value="r2" :checked="a.check" disabled />默认</label>
						</checkbox-group>
					</view>
					<view class="right">
						<navigator class="edit-box" @tap.stop="editBtn(i, a.address_id)">
							<image src="/static/images/mallShop/edit.png" mode="" class="icon-edit"></image> 编辑
						</navigator>
						<view class="delete-box" @tap.stop="deleteBtn(i)">
							<image src="/static/images/mallShop/delete.png" mode="" class="icon-delete"></image> 删除
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add-fixed-box">
			<navigator class="add-fixed-btn" url="./addressForm" hover-class="none">
				新增收货地址
			</navigator>
		</view>
	</view>
</template>

<script>
	import MallHeader from '@/components/mallHeader/mallHeader'
	
	import { isLogin, addressList, setDefault, removeAddress } from '@/api/substitution.js'
	
	export default {
		components:{
			MallHeader
		},
		data() {
			return {
				listData:[],
				active: '',
			}
		},
		onShow() {
			this.getData()
		},
		onLoad() {
			isLogin()
		},
		methods: {
			
			// 地址列表
			getData(){
				addressList().then(res => {
					res.data.list.forEach(item => {
						item.address = '';
						if (item.address_id === res.data.default_id) {
							item.check = true
						} else {
							item.check = false
						}
						for (let i in item.region) {
							item.address += item.region[i] + ' '
						}
					})
					this.listData = res.data.list
				})
			},
			
			// 设置默认
			onChange(e) {
				const that = this;
				console.log(this.listData[e].address_id)
				uni.showModal({
					title: '操作',
					content: '是否设置为默认地址',
					success (res) {
						if (res.confirm) {
							 setDefault({
									address_id: that.listData[e].address_id
								}).then(res => {
									if (res.code === 1) {
										uni.showToast({
											title: res.msg,
											icon: 'success'
										})
										uni.navigateBack()
									}
								})
							} else {
								console.log(1)
							}
						}
				});
			},
			editBtn(i, e){
				uni.navigateTo({
					url:'./addressForm?edit=1&id=' + e
				})
			},
			
			deleteBtn(e){
				const that = this;
				uni.showModal({
					title: '操作',
					content: '是否删除该地址',
					success (res) {
						if (res.confirm) {
							uni.showLoading({
								mask: true
							})
							 removeAddress({
									address_id: that.listData[e].address_id
								}).then(res => {
									uni.showToast({
										title: res.msg,
										icon: 'success'
									});
									that.getData()
								})
							} else {
								console.log(1)
							}
						}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "/common/css/shop.css";
	.list{
		margin-top: 80rpx;
		padding-bottom: 130rpx;
		.item{
			padding:20rpx 30rpx;
			&:not(:first-child){
				margin-top: 20rpx;
			}
			.item1{
				font-size: 34rpx;
				font-weight: bold;
				color: #333333;
				.name{
					margin-right:20rpx;
				}
				.phone {
					font-size: 32rpx;
				}
			}
			.item2{
				color: #666666;
				font-size: 26rpx;
				margin:20rpx -30rpx 0;
				padding-bottom:30rpx;
				padding-left:30rpx;
				border-bottom:1rpx solid #CDCDCD;
			}
			.item3{
				display: flex;
				justify-content: space-between;
				margin-top:30rpx;
				[class*='icon']{
					margin-right:10rpx;
				}
				.left {
					/deep/ uni-checkbox-group {
						.radio {
							display: flex;
							align-content: center;
							font-size: 28rpx;
							
							uni-checkbox {
								display: flex;
								align-content: center;
								.uni-checkbox-wrapper {
									.uni-checkbox-input {
										border-radius: 50%;
										width: 35rpx;
										height: 35rpx;
										margin-right: 20rpx;
										&.uni-checkbox-input-checked {
											background-color: #E77041;
											border-color: #E77041;
										}
										&:hover {
											border-color: #E77041;
										}
										&::before {
											font-size: 35rpx;
											color: #FFFFFF;
											top: 48%;
										}
									}
								}
							}
						}
					}
				}
				.right{
					@include alignCenter();
					font-size: 26rpx;
					color: #666666;
					.edit-box{
						margin-right:20rpx;
					}
					.icon-edit{
						width: 26rpx;
						height: 26rpx;
					}
					.icon-delete{
						width: 24rpx;
						height: 28rpx;
					}
				}
			}
			
			
		}
	}
	.add-fixed-box{
		position: fixed;
		bottom: 0;
		padding: 15rpx 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		
		.add-fixed-btn {
			width: 690rpx;
			height: 80rpx;
			border-radius: 40rpx;
			font-size: 34rpx;
			@include flexCenter();
			@include bgGradient();
		}
	}
</style>
